<template>
  <div class="judge">
    <div class="topic" v-for="(item, index) in judgeTopic">
      <section v-if="!test">
        <!-- 考试/作业 -->
        <p class="radio_num">
          {{ index + 1 }}.
          <span class="mold">（判断题 {{ item.sorce }} 分）</span>
        </p>

        <p class="name" v-html="item.topicSubject"></p>
      </section>
      <section v-if="test">
        <!-- 测试 -->
        <p class="radio_num">
          <span style="margin-left:4px;">{{ index + 1 }}.</span>
          <span class="name" v-html="item.topicSubject"></span>
          <span class="mold">(判断题)</span>
        </p>
      </section>
      <div class="select">
        <p v-for="(iter, i) in item.topicOptions" @click="selectClick(i,index)" :key="i">
          <span
            class="option judges"
            :class="{'checked': currentIndex[index].select === option[i] }"
          >{{option[i]}}</span>
          <span class="text" v-html="iter"></span>
        </p>
      </div>

      <div class="correctAnswer" v-show="isSubmit">
        正确答案:
        <span
          class="correctOption"
          v-html="item.answers[0]"
          :class="{'right': item.situation == '1'}"
        ></span>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from '@/common/bus';

export default {
  name: 'judge',
  data() {
    return {
      currentIndex: [],
      isSubmit: false,
      option: ['a', 'b'],
      test: true,
    };
  },
  props: {
    judgeTopic: {
      type: Array,
      default: [],
    },
  },
  watch: {
    judgeTopic: {
      handler(n, o) {
        this.init();
      },
    },
  },
  mounted() {
    this._submited();
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.currentIndex = [];
      for (var iter of this.judgeTopic) {
        if (iter.submitAnswer[0] != null) {
          this.currentIndex.push({ select: iter.submitAnswer[0] });
        } else {
          this.currentIndex.push({ select: '' });
        }
      }
    },

    selectClick(index, cIndex) {
      var judgeSelect = document.querySelectorAll('.judges');
      var val = document.querySelectorAll('.text');
      let flag = false; /* 用于记录该题是否已做 */

      // 获取当前点击的选项
      var iid = index + cIndex * 2;

      // 判断当前选项是否已选择，没选就选中
      if (judgeSelect[iid].classList.value.indexOf('checked') != -1) {
        judgeSelect[iid].classList.remove('checked');
        this.currentIndex[cIndex].select = '';
        flag = false;
      } else {
        this.currentIndex[cIndex].select = this.option[index];
        flag = true;
      }

      // 记录当前题的相关信息
      var judgeTopicOk = {
        num: cIndex + 1,
        finish: flag,
        topicList: {
          id: this.judgeTopic[cIndex].id,
          kind: '2',
          submitAnswer: [judgeSelect[iid].innerHTML],
        },
        value: [val[iid].innerHTML],
      };

      Bus.$emit('judgeTopic', judgeTopicOk);
    },
    _submited() {
      Bus.$on('submit', () => {
        this.isSubmit = true;
      });
    },
  },
  beforeDestroy() {
    Bus.$off('submit');
  },
};
</script>

<style scoped>
.judge .topic {
  margin-bottom: 50px;
}
.judge .mold {
  color: #a8a8b3;
}
.judge .name {
  width: 800px;
  line-height: 24px;
  margin-bottom: 20px;
}
.judge .select > p {
  padding: 5px 0 10px 0;
  line-height: 34px;
  display: flex;
  align-items: center;
  color: rgb(96, 98, 102);
  transition: all 0.3s;
}
.judge .select > p:hover {
  background-color: #f7fafc;
}
.judge .select p .option {
  height: 34px;
  width: 34px;
  text-align: center;
  text-transform: uppercase;
  border-radius: 50%;
  border: 1px solid #e1eaf4;
  margin-right: 20px;
  transition: all 0.3s;
}
.judge .select p .checked {
  background-color: #6486ff;
  color: #fff;
}
.judge .select p .option:hover {
  background-color: #3a8bff;
  color: #e6f0ff;
}
.correctAnswer {
  height: 60px;
  line-height: 60px;
  text-indent: 1rem;
  font-size: 16px;
  background-color: #f2f4f7;
  border-left: 1px solid #6486ff;
}
.correctAnswer .correctOption {
  display: inline-block;
  margin-right: 8px;
  color: #f00;
  text-transform: uppercase;
}
.right {
  color: #6486ff !important;
}
</style>